<template>
	<view class="address-entrance" @click="chooseAddress">
		<card-com :show-gap="false">
			<view class="content" v-if="currentAddress">
				<view class="content-item">
					<view class="content-item-left">
						<!-- <image src="/static/images/addressicon.png" class="addressicon" mode=""></image> -->
						<view class="item">
							<view class="default">默认</view>
							<view class="address">{{ currentAddress.province }}{{ currentAddress.city }}{{ currentAddress.district }}</view>
							<view class="address-full">{{ currentAddress.address }}</view>
							<view class="contacts">
								<view class="name">{{ currentAddress.contact_name }}</view>
								<view class="phone">{{ currentAddress.contact_phone }}</view>
							</view>
						</view>
					</view>
					<image src="/static/images/rightmore.png" class="rightmore" mode=""></image>
				</view>
			<!-- 	<view class="note">{{ shipNotice }}</view> -->

			</view>
			<view class="content" v-else>
				<view class="item">
					<view class="address-no">请添加收货地址</view>
				</view>
				<!-- <view class="note">{{ shipNotice }}</view> -->
			</view>
		</card-com>

	</view>
</template>

<script>
	import store from 'store'
	import {
		mapGetters,
		mapActions
	} from 'vuex'

	export default {
		name: "OrderAddressEntranceCom",
		store,
		props: {
		  shipNotice: {
				default:'受疫情影响，部分地区无法及时发货，平台会在疫情解除后第一时间安排发货，敬请谅解！'
		  }
		},
		data: () => ({
			// shipNotice: ''
		}),
		computed: {
			...mapGetters([
				'currentAddress'
			])
		},
		methods: {
			...mapActions([
				'getDefaultAddress',
				'updateIsAddressChosenForOrder'
			]),
			async chooseAddress() {
				await this.updateIsAddressChosenForOrder(true)
				uni.navigateTo({
					url: `/packs/pages/address/index`
				})
			}
		},
		async created() {
			await this.getDefaultAddress()
		}
	}
</script>

<style lang="scss" scoped>
	.card{
		border:none !important;
	}
	.address-entrance {
		
		border:none;
		.content {
			.item {
				margin-left:22rpx;
				.default{
					background:#D84C29;
					color: #fff;
					width:64rpx;
					height:30rpx;
					float:left;
					font-size:14rpx;
					border-radius:4rpx;
					margin-top:10rpx;
					line-height:30rpx;
					text-align: center;
				}
				.address {
					width: 522rpx;
					font-size:28rpx;
					font-weight: 400;
					color: #333333;
					margin-top: 5rpx;
					margin-left:20rpx;
					float:left;
				}
				.address-full{
					width: 550rpx;
					font-size:28rpx;
					font-weight: 700;
					color: #333333;
					margin-top: 50rpx;
					
				}
				.address-no{
					width: 550rpx;
					font-size:28rpx;
					font-weight: 700;
					color: #333333;
					
				}
				.contacts {
					display: flex;
					align-items: baseline;
					justify-content: flex-start;
					margin-top:6rpx;
					.name {
						font-size:26rpx;
						font-weight: 500;
						color: #333333;
						margin-right: 20rpx;
					}

					.phone {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}

			.note {
				font-size: 22rpx;
				color: #E6A23C;
				margin-top: 20rpx;
				padding-top: 20rpx;
				border-top: 1px #EEEEEE solid;
			}
		}
	}

	.content-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.rightmore {
		display: block;
		width: 32rpx;
		height: 32rpx;
	}

	.content-item-left {
		display: flex;
		align-items: center;
	}

	.addressicon {
		display: block;
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
</style>
